<template>
  <a-drawer
      :visible="visible"
      :title="title"
      placement="right"
      @close="btnCancels"
      :width="$store.getters.isMobile ? '100%' : 450"
      :keyboard="false"
      :body-style="{
      height: 'calc(100%)',
      boxSizing: 'border-box',
    }"
  >
    <a-form ref="formRef" :model="formState" :rules="rules" layout="vertical">
      <a-form-item label="姓名" name="name">
        <span>{{ formState.name }}</span>
      </a-form-item>
      <a-form-item label="电话" name="phone">
        <span>{{ formState.phone }}</span>
      </a-form-item>
      <a-form-item label="渠道类型" name="source">
        <span>{{ formState.source }}</span>
      </a-form-item>

      <a-form-item label="绑定项目" name="village_id">
        <span>{{ formState.village_name }}</span>
      </a-form-item>

      <a-form-item label="公司" name="company">
        <span>{{ formState.company }}</span>
      </a-form-item>
      <a-form-item label="所属城市/区域">
        <span v-if="formState.area?.provinceName">{{
            formState.area?.provinceName
          }}</span>
        <span v-if="formState.area?.cityName">{{
            formState.area.cityName
          }}</span>
        <span v-if="formState.area?.districtName">{{
            formState.area.districtName
          }}</span>
        <span v-if="formState.area?.streetName">{{
            formState.area.streetName
          }}</span>
      </a-form-item>
      <a-form-item label="邮箱" name="email">
        <span>{{ formState.email }}</span>
      </a-form-item>
      <a-form-item label="通讯地址" name="address">
        <span>{{ formState.address }}</span>
      </a-form-item>

      <a-form-item label="开户行" name="bank">
        <span>{{ formState.bank }}</span>
      </a-form-item>

      <a-form-item label="收款账号" name="bank_account">
        <span>{{ formState.bank_account }}</span>
      </a-form-item>

      <a-form-item label="补充材料">
        <div style="display: flex">
          <div
              style="width: 100px; height: 100px; margin: 10px 0 0 8px"
              v-for="item in fileList"
          >
            <a-image :src="item.url" :width="100"/>
          </div>
        </div>
      </a-form-item>
    </a-form>

    <div class="drawer-footer" v-if="detail.approval_status == 1">
      <a-space>
        <a-button type="primary" @click="changeApprovalStatus(1)">同意</a-button>
        <a-button type="primary" danger @click="changeApprovalStatus(0)">拒绝</a-button>
      </a-space>
    </div>


    <a-modal v-model:visible="rejectVisible" title="拒绝" @ok="handleReject">
      <a-form>
        <a-form-item label="拒绝原因" name="reject_reason" v-bind="validateInfos.reject_reason">
          <a-textarea placeholder="请输入拒绝原因" v-model:value="modelRef.reject_reason"/>
        </a-form-item>
      </a-form>
    </a-modal>


  </a-drawer>
</template>

<script>
import {
  defineComponent,
  ref,
  toRaw,
  reactive,
  computed,
  watch,
  toRefs, createVNode,
} from "vue";
import request from "../../../../common/utils/request";
import utils from "../../../../common/utils/utils";
import {message, Modal, Form} from "ant-design-vue";
import {ExclamationCircleOutlined} from '@ant-design/icons-vue'

const useForm = Form.useForm
export default defineComponent({
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    id: {
      type: [Number, String],
      default: 0,
    },
  },

  setup(props, context) {
    const state = reactive({
      detail: {},
      rejectVisible: false,
    })
    const btnCancels = () => {
      context.emit("cancel");
    };

    const handleChange = (val) => {
      console.log(val);
    };

    const modelRef = reactive({
      reject_reason: ""
    })
    const ruleRef = reactive({
      reject_reason: [{
        required: true,
        message: "请输入拒绝原因",
      }],
    })
    const {validate, resetFields, validateInfos} = useForm(modelRef, ruleRef)
    const formRef = ref();
    const formState = reactive({
      name: "",
      phone: "",
      company: "",
      email: "",
      address: "",
      id: "",
      village_id: [],
      source: undefined,
      bank: "",
      bank_account: "",
      extra: [],
      village_name: "",
      area: undefined,
    });

    const fileList = ref([]);

    const rules = {
      name: [
        {
          required: false,
          message: "请输入租客姓名",
          trigger: "blur",
        },
      ],
      area: [
        {
          required: false,
          message: "请选择城市/区域",
          trigger: "blur",
        },
      ],
      phone: [
        {
          required: false,
          validator: (rules, value) => utils.phoneAndTelValidator(rules, value),
        },
      ],
      source: [
        {
          required: false,
          message: "请选择渠道",
          trigger: "blur",
        },
      ],
      village_id: [
        {
          required: false,
          message: "请选择项目",
          trigger: "blur",
        },
      ],
      company: [
        {
          required: false,
          message: "请填写公司名称",
          trigger: "blur",
        },
      ],
      email: [
        {
          required: false,
          message: "请填写邮箱",
          trigger: "blur",
        },
      ],
      address: [
        {
          required: false,
          message: "请填写通讯地址",
          trigger: "blur",
        },
      ],
    };

    // 详情列表
    let detail = {};
    const getChannelList = () => {
      request
          .get("/org", "/business/customer/channel/get", {id: props.id})
          .then((res) => {
            state.detail = res.detail;

            setModelRef(state.detail);
          });
    };
    const setModelRef = (state) => {
      for (let key in state) {
        if (key == "source" && state[key]) {
          formState.source = state[key].source;
        } else {
          formState[key] = state[key];
        }
        fileList.value = [];
        if (formState?.extra?.length > 0) {
          fileList.value = formState.extra.map((item) => {
            return {
              url: item.url,
            };
          });
        }
      }
      console.log(formState);
    };

    const title = computed(() => {
      return "渠道详情";
    });

    watch(
        () => props.visible,
        (val) => {
          if (val) {
            if (props.id) {
              getChannelList();
            }
          } else {
            detail = {};
            fileList.value = [];
          }
        }
    );

    const handleReject = () => {

      validate().then(() => {
        request.post("/org", "/business/customer/channel/handleChannel", {
          id: props.id,
          status: 2,
          reject_reason: modelRef.reject_reason
        }).then(res => {
          console.log(res)
          state.rejectVisible = false
          message.success("操作成功!")
          context.emit("closeDetail");
        })
      })

    }

    const handleAgree = () => {
      request.post("/org", "/business/customer/channel/handleChannel", {
        id: props.id,
        status: 1,
      }).then(res => {
        console.log(res)
        message.success("操作成功!")
        resetFields()
        context.emit("closeDetail");
      })
    }

    const changeApprovalStatus = (val) => {
      if (val == 1) {
        //同意
        Modal.confirm({
          title: () => "提示",
          content: () => "确定通过该申请吗？",
          icon: () => createVNode(ExclamationCircleOutlined),
          okText: () => "确定",
          onOk() {
            handleAgree()
          },
        });
      } else {
        // 拒绝
        state.rejectVisible = true
      }
    }


    return {
      ...toRefs(state),
      rules,
      formState,
      btnCancels,
      title,
      formRef,
      imgAction: request.BASE_URL + "/public/system/uploadImage",
      handleChange,
      fileList,
      handleReject,
      handleAgree,
      changeApprovalStatus,
      validateInfos,
      modelRef
    };
  },
});
</script>

<style lang="less" scoped></style>
